<template>
    <div>
        
        <el-menu
            :default-active="state.currentMenu"
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            text-color="#fff"
            :collapse="state.isSidebarNavCollapse"
            :unique-opened="true"
        >
        <div class="logo">
            <div class="logoBox1 clearfix" v-if="!state.isSidebarNavCollapse">
                <img src="../../assets/nanxiLogo.png" alt="">
                <p >南希心理</p>
            </div>
            
            <div class="logoBox2 clearfix" v-else>
                <img src="../../assets/nanxiLogo.png" alt="">
            </div>
            
        </div>
        <MENU :menuList="state.sidebarMenu"></MENU>
        </el-menu>
    </div>
</template>

<script lang="ts" setup>
import {useStore} from "vuex";
import { defineComponent, reactive ,computed, ref} from "vue";
import { useRouter } from "vue-router";
import MENU from "./navMenu.vue";
const store = useStore();
let state = reactive({
    isSidebarNavCollapse: computed(()=>store.getters.getIsSidebarNavCollapse),
    sidebarMenu: computed(()=>store.getters.GET_MENU),
    currentMenu: computed(()=>store.getters.GET_CURRENTMENU),
})
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 210px;
  min-height: calc(100%);
}
.logo{
    text-align: center;
    color: #efefef;
    height: 50px;
}
.logoBox1{
    width: 124px;
    margin: auto;
}
.logoBox1 img{
    width: 50px;
    height: 50px;
    float: left;
}
.logoBox1 p{
    margin-left: 10px;
    float: left;
    line-height: 50px;
}
.logoBox2 img{
    width: 40px;
    height: 40px;
    margin: auto;
    margin-top: 5px;
}
</style>